<template>
<div class="page-link views-container">
    <div class="main">
        <div class="flex-row" style="flex-wrap: wrap;">
            <div class="box-card" v-for="(item, index) in categoryData" :key="index">
                <div class="card-header">
                    <span>{{item.title}}</span>
                </div>
                <div class="item">
                   <div class="flex-row" style="margin-bottom:6px;" v-if="item.path.wachat_short_url">
                        <span class="link-title">页面短链接：</span>
                        <span style="word-break:break-all" class="pointer" @click="handleClipboard(item.path.wachat_short_url,$event)">{{item.path.wachat_short_url}}</span>
                    </div>
                    <div class="flex-row" style="margin-bottom:6px;" v-if="item.path.wachat_url">
                        <span class="link-title">页面链接：</span>
                        <span style="word-break:break-all" class="pointer" @click="handleClipboard(item.path.wachat_url,$event)">{{item.path.wachat_url}}</span>
                    </div>
                    <div class="flex-row" style="word-break:break-all" v-if="item.path.wxapp_url">
                        <span class="link-title">页面路径：</span>
                        <span style="word-break:break-all" class="pointer" @click="handleClipboard(item.path.wxapp_url,$event)">{{item.path.wxapp_url}}</span>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
  getBasicLink
} from '@/api/platform'
import clipboard from '@/utils/clipboard'
export default {
  name: 'PageLink',
  components: {

  },
  computed: {

  },
  created() {
    getBasicLink().then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      const keys = Object.keys(msgData)
      const result = []
      keys.map(item => {
        result.push(msgData[item])
      })
      this.categoryData = result
    })
  },
  data() {
    return {
      categoryData: [],
      formFormatData: {
        key: 'userForm',
        formData: {

        }
      }
    }
  },
  methods: {
    handleClipboard(text, event) {
      clipboard(text, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.page-link {
    font-size: 12px;
    .link-title{
      font-size: 12px;
      white-space: nowrap;
    }
    .box-card {
        border-radius: 4px;
        background-color: #fff;
        width: 23%;
        margin:0 20px 20px 0;
        overflow: hidden;
    }

    .box-card .item {
        min-height: 110px;
        padding: 24px 20px;
    }

    .box-card .card-header {
        background: #409eff;
        color: #fff;
        font-size: 16px;
        padding: 8px 20px;
    }
}
</style>
